<template>
  <el-dialog
    :visible="visible"
    @update:visible="handleVisible"
    :show-close="false"
    width="35%"
  >
    <el-carousel
      ref="carousel"
      indicator-position="outside"
      height="475px"
      :autoplay="false"
      trigger="click"
      :initial-index="startPosition"
      :interval="500000"
    >
      <el-carousel-item v-for="(image, index) in images" :key="index">
        <center>
          <el-image :src="image" fit="fill" style="height: 475px" />
        </center>
      </el-carousel-item>
    </el-carousel>
  </el-dialog>
</template>

<script>
export default {
  name: "ImagePreview",
  props: ["value", "startPosition", "visible"],
  data() {
    return {};
  },
  computed: {
    images() {
      return this.value || [];
    }
  },
  methods: {
    handleVisible(visible) {
      this.$emit("update:visible", visible);
    },
    handleClose() {},
    setActiveIndex(index) {
      if (this.$refs.carousel) {
        this.$refs.carousel.setActiveItem(index);
      }
    }
  },
  watch: {
    startPosition(index) {
      this.setActiveIndex(index);
    }
  }
};
</script>

<style scoped>
::v-deep .el-dialog__header {
  padding: 0;
}
</style>
